<template>
  <div>
    <div class="table-page-search-wrapper">
      <div style="display: inline-block">
        <a-button
          type="primary"
          icon="plus"
          @click="handleAdd"
          >添加</a-button
        >
        <a-button
          icon="cloud"
          @click="sync"
          style="margin-left: 8px"
          >同步</a-button
        >
      </div>
      <div style="display: inline-block; width: 75%; float: right">
        <a-form-model
          ref="formModel"
          :model="form"
          layout="inline"
          :rules="{
            name: [
              {
                validator: validators.noWhitespace(),
                trigger: 'change',
              },
              {
                validator: validators.noIllegalString(),
                trigger: 'change',
              },
              {
                max: 10,
                message: '长度在 1 到 10 个字符',
                trigger: 'change',
              },
            ],
          }"
        >
          <a-row :gutter="[16, 16]" type="flex" justify="end">
            <a-col :span="8">
              <a-form-model-item prop="name" label="设备名称">
                <a-input autocomplete="off" v-model="form.name"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item prop="type" label="设备类型">
                <a-select
                  :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }"
                  v-model="form.type"
                >
                  <a-select-option
                    v-for="d in typeList"
                    :key="d.value"
                    :value="d.value"
                  >
                    {{ d.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-col :span="8">
                <a-button
                  type="primary"
                  @click="loadData(true)"
                  icon="search"
                >
                  查询
                </a-button>
                <a-button
                  @click="resetSearchForm"
                  icon="reload"
                  style="margin-left: 8px"
                >
                  重置
                </a-button>
              </a-col>
            </span>
          </a-row>
        </a-form-model>
      </div>
    </div>
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" icon="edit" size="small" @click="handleEdit(record)">编辑</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" icon="profile" size="small" @click="handleDetail(record)">详情</a-button>
        <a-divider type="vertical" />
        <a-button type="danger" icon="delete" size="small" @click="handleDel(record)">删除</a-button>
        <!-- <a-popconfirm title="确定删除吗?" @confirm="() => handleDel(record)">
        </a-popconfirm> -->
      </span>
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
    <add-modal ref="addModal" @ok="loadData"></add-modal>
    <edit-modal ref="editModal" @ok="loadData"></edit-modal>
    <detail-modal ref="detailModal" @ok="loadData"></detail-modal>
  </div>
</template>

<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { getAction, gPostAction } from "@/api/manage";
import AddModal from "./modules/equipment/AddModal";
import EditModal from "./modules/equipment/EditModal";
import DetailModal from "./modules/equipment/DetailModal";

export default {
  name: "Equipment",
  mixins: [GwListMixin],
  components: {
    AddModal,
    EditModal,
    DetailModal,
  },
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "设备名称",
          width: 200,
          dataIndex: "name",
        },
        {
          title: "设备类型",
          dataIndex: "typeCnName",
        },
        {
          title: "设备型号",
          dataIndex: "deviceModel",
        },
        {
          title: "数据中心",
          dataIndex: "datacenterName",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
        },
        {
          title: "操作",
          width: 250,
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      typeList: [
        {
          name: "全部",
          value: ''
        },
        {
          name: '服务器',
          value: 6,
        },
        {
          name: '交换机',
          value: 7,
        },
      ],
      form: {
        type: "",
        name: "",
      },
      url: {
        nodeList: "/asset/pageItDevice",
        switcherList: "/asset/pageItDevice",
        nodeDel: "/asset/deleteNode",
        switcherDel: "/asset/deleteSwitcher",
      },
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    sync() {
      getAction("/asset/syncNodeSwitcher", {}).then((res) => {
        if (res.success) {
          this.loadData(true);
          this.$message.success(res.data || "同步成功");
        }
      });
    },
    loadData(isDoSearch) {
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        // let listUrl = ''
        // if (this.type === 'switcher') {
        //   listUrl = this.url.switcherList
        // } else {
        //   listUrl = this.url.nodeList
        // }

        this.gQueryParam.name = this.form.name;
        this.gQueryParam.type = this.form.type;
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }

        gPostAction("asset/pageItDevice", this.gQueryParam).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.gDataSource = data.list;
            this.gPagination.total = data.totalCount;
          }
        });
      });
    },
    handleAdd() {
      this.$refs.addModal.add();
    },
    handleDel(record) {
      const that = this;
      this.$confirm({
        title: "提示",
        content: "确定删除【" + record.name + "】吗 ?",
        onOk() {
          let delUrl = "";
          if (record.type === 6) {
            delUrl = that.url.nodeDel;
          } else {
            delUrl = that.url.switcherDel;
          }
          const data = {
            id: record.id,
            title: "精确管控与供电制冷联动-基础资源细粒度感知-资源管理-L2层：IT设备"
          };
          gPostAction(delUrl, data).then((res) => {
            if (res.success) {
              that.$message.success("操作成功");
              that.deleteCallBack();
            }
          });
        },
        onCancel() {},
      });
    },
    handleEdit(record) {
      this.$refs.editModal.edit(record);
    },
    handleDetail(record) {
      this.$refs.detailModal.detail(record);
    },
    resetSearchForm() {
      this.form.name = "";
      this.form.type = "";
      this.$refs.formModel.resetFields();
    },
  },
};
</script>
